<template>
  <div class="user-page">
    <header>
      <img class="dtp" src="http://124.223.73.204:8080/img/profile/bg.png" alt="">
      <div class="dlkp"> <img :src="user.id?`http://124.223.73.204:8080${user.avatar}`:'http://124.223.73.204:8080/img/profile/avatar.png'" alt="">
      <div>{{user.id?user.nickname:'游客'}}</div>
    <button @click="register">{{user.id?'退出登录':'去登录'}}</button>
   <p v-if="user.id">编辑个人资料 <van-icon name="play" /></p></div>

    </header>
    <van-grid :column-num="3">
  <van-grid-item  icon="star-o" text="我的收藏" />
  <van-grid-item  icon="wap-home-o" text="我的出租" />
  <van-grid-item  icon="underway-o" text="看房记录" />
  <van-grid-item  icon="credit-pay" text="成为房主" />
  <van-grid-item  icon="manager-o" text="个人资料" />
  <van-grid-item  icon="service-o" text="联系我们" />
</van-grid>
<img class="gg" src="http://124.223.73.204:8080/img/profile/join.png" alt="">
  </div>
</template>
<script>
import instance from '@/utils/request'
import { Dialog } from 'vant'

export default {
  name: 'UserPage',
  data () {
    return {
      user: ''
    }
  },
  async created () {
    const token = localStorage.getItem('vue-hkzf-token')
    // Toast.loading({
    //   message: '加载中...',
    //   forbidClick: true,
    //   duration: 1000
    // })
    const res = await instance.get('/user', { headers: { authorization: token } })
    console.log(res)
    this.user = res.data.body
    console.log(this.user)
  },
  methods: {
    register () {
      if (this.user.id) {
        Dialog.confirm({
          title: '提示',
          message: '是否确认退出'
        })
          .then(() => {
            localStorage.removeItem('vue-hkzf-token')
            this.user = ''
          })
          .catch(() => {

          })
      } else {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style lang="less" scoped>
*{
  box-sizing: border-box;
    touch-action: pan-y
}
header{
min-height: 300px;
    position: relative;
  .dtp{width: 100%;
  height: 191px;}
  .dlkp{
    position: absolute;
    background: #fff;
    width: 85%;
    height: 55%;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    padding-top: 0;
    text-align: center;
    font-size: 13px;
    margin-bottom: 5px;
    img{
      position: relative;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    border: solid 5px #f5f5f5;
    display: inline-block;
    box-shadow: 0px 2px 2px #bdbdbd;
    }
    div{    margin-top: -30px;
    margin-bottom: 10px;}
    button{    font-size: 13px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    background-color: #21b97a;
    border-radius: 5px;
    position: relative;
    border: none;color: #fff;}
    p{    color: #999;
    font-size: 12px;
    margin-top: 20px;}
  }

}

.gg{margin-top: 30px;
  width: 92%;
  border-style: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);}
</style>
